
angular.module('myApp')
  .controller('MenuCtrl', ['$scope', function ($scope) {
    $scope.message = 'Hello, AngularJS!';
  }])
  .directive('elxMenu', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { mode: '@', activeIndex: '@' },
      controller: ['$scope', function ($scope) {
        this.mode = $scope.mode || 'vertical';
        this.activeIndex = $scope.activeIndex;

        this.setActive = function (index) {
          this.activeIndex = index;
          $scope.$broadcast('menu.activeChange', index);
        };
      }],
      template: `
        <ul class="el-menu" 
            ng-class="{
              'el-menu--horizontal': mode === 'horizontal',
              'el-menu--vertical': mode === 'vertical'
            }"
            ng-transclude>
        </ul>
      `
    };
  })
  .directive('elxSubmenu', ['$timeout', function ($timeout) {
    return {
      restrict: 'E',
      require: '^elMenu',
      transclude: {
        title: 'slotTitle',
        content: 'slotContent'
      },
      scope: { index: '@' },
      link: function (scope, element, attrs, menuCtrl) {
        scope.isOpen = false;
        const popupMenu = element.find('.el-menu--popup');

        // 状态同步（修复网页3的展开冲突问题）
        scope.$on('menu.activeChange', function (event, index) {
          if (index !== scope.index) {
            $timeout(() => scope.isOpen = false);
          }
        });

        // 事件处理（结合网页2的点击事件）
        scope.toggleMenu = function ($event) {
          if (menuCtrl.mode === 'vertical') {
            $event.stopPropagation();
            scope.isOpen = !scope.isOpen;
          }
        };

        // 水平模式悬停逻辑
        element.on('mouseenter', () => {
          if (menuCtrl.mode === 'horizontal') {
            scope.isOpen = true;
            scope.$apply();
          }
        }).on('mouseleave', () => {
          if (menuCtrl.mode === 'horizontal') {
            $timeout(() => scope.isOpen = false, 200);
          }
        });
      },
      template: `
        <li class="el-submenu" ng-class="{'is-opened': isOpen}">
          <div class="el-submenu__title" ng-click="toggleMenu($event)">
            <span ng-transclude="title"></span>
            <i class="el-submenu__icon-arrow el-icon-arrow-down"></i>
          </div>
          <ul class="el-menu el-menu--popup" ng-show="isOpen">
            <div ng-transclude="content"></div>
          </ul>
        </li>
      `
    };
  }])
  .directive('elxMenuItem', function () {
    return {
      restrict: 'E',
      require: '^elMenu',
      transclude: true,
      scope: { index: '@' },
      link: function (scope, element, attrs, menuCtrl) {
        element.on('click', function () {
          menuCtrl.setActive(scope.index);
          element.addClass('is-active');
        });

        scope.$watch(() => menuCtrl.activeIndex, (newVal) => {
          element.toggleClass('is-active', newVal === scope.index);
        });
      },
      template: `
        <li class="el-menu-item" ng-transclude></li>
      `
    };
  });